<template>
	<el-container>
		<el-main>
			<el-form style="height: 70vh;overflow: hidden;" :model="entityObj" :rules="rules" ref="dialogForm" label-width="100px">
				<el-tabs tab-position="left" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane label="小程序顶部轮播广告">
						<el-collapse v-model="activeNames">
							<el-collapse-item disabled title="小程序顶部轮播广告" name="1">
								<div>说明:</div>
								<div>添加轮播图,上限：5张；</div>
								<div>图片建议尺寸750*490像素，不大于500KB，支持PNG,JPEG,GIF</div>
								<el-button type="primary" @click="addTopCarousel">添加轮播图</el-button>
								<div style="height: 500px;overflow: auto;">
									<el-card v-for="(item,index) in entityObj.TopCarouselList">
										<template #header>
											<el-row>
												<el-col :span="18">
													{{'图片'+(index+1)}}
												</el-col>
												<el-col :span="2">
													<div @click="TopCarouselUp(index)"
														style="color:#222B45;font-size:14px">
														上移</div>
												</el-col>
												<el-col :span="2">
													<div @click="TopCarouselDown(index)"
														style="color:#222B45;font-size:14px">下移</div>
												</el-col>
												<el-col :span="2">
													<div @click="TopCarouselDel(index)"
														style="color:#222B45;font-size:14px">删除</div>
												</el-col>
											</el-row>
										</template>
										<el-form-item label-width="0px" prop="MiniLogo">
											<sc-upload-multiple v-model="item.CarouselPic" :objName="'backend/Organize'"
												:uploadType="'OSS'" :bucketName="'jtmc'" draggable :limit="1" />
										</el-form-item>
										<el-form-item label-width="80px" label="跳转链接" prop="MiniLogo">
											<el-input style="width: 40%;" v-model="item.CarouselUrl" />
										</el-form-item>
									</el-card>
								</div>

							</el-collapse-item>
						</el-collapse>
					</el-tab-pane>
				</el-tabs>
			</el-form>
			<div style="text-align: center;">
				<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
			</div>
		</el-main>
	</el-container>

</template>

<script>
	export default {
		name: "miniset/homecarouselimage",
		data() {
			return {
				isSaveing: false,
				activeNames: ['1'],
				editableTabsValue: '1',
				entityObj: {
					TopCarouselList: [],
				}
			}
		},
		//路由跳转进来 判断from是否有特殊标识做特殊处理
		beforeRouteEnter(to, from, next) {
			next((vm) => {
			if (from.is) {
				//删除特殊标识，防止标签刷新重复执行
				delete from.is;
				//执行特殊方法
				vm.$alert("路由跳转过来后含有特殊标识，做特殊处理", "提示", {
				type: "success",
				center: true,
				})
				.then(() => {})
				.catch(() => {});
			}
			});
		},
		methods: {
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
				    if (valid) {
						console.log(this.entityObj);
				        this.isSaveing = true;
				        try {
				            //this.entityObj.applyOrderItems.map(p=>p.applyOrderItemType=0);
				            var returnValue =
				                await this.$API.auth.PostProcessApi.post(
				                    "mini-set/saveHomeCarouselImages",
				                    this.entityObj.TopCarouselList
				                );
				            if (returnValue.status == 200) {
				                this.$message.success("操作成功");
				                this.$emit("fatherMethod");
				                this.isSaveing = false;
				                this.visible = false;
				            } else {
				                this.$message.error("操作失败:" + returnValue.msg);
				                this.isSaveing = false;
				            }
				        } catch (error) {
				            this.loading = false;
				            this.isSaveing = false;
				            return false;
				        }
				    }
				});
			},
			addTopCarousel() {
				if (this.entityObj.TopCarouselList.length >= 5) {
					this.$message.error("轮播图不允许5张");
				} else {
					this.entityObj.TopCarouselList.push({
						CarouselPic: '',
						CarouselUrl: ''
					})
				}
			},
			TopCarouselUp(index) {
				if (index > 0 && this.entityObj.TopCarouselList.length > index) {
					let index1 = index; // 要交换的第一个元素的索引
					index--;
					let index2 = index; // 要交换的第二个元素的索引
					// 使用临时变量交换元素
					let temp = this.entityObj.TopCarouselList[index1];
					this.entityObj.TopCarouselList[index1] = this.entityObj.TopCarouselList[index2];
					this.entityObj.TopCarouselList[index2] = temp;
				}
			},
			TopCarouselDown(index) {
				if (index < this.entityObj.TopCarouselList.length - 1 && this.entityObj.TopCarouselList.length > 1) {
					let index1 = index; // 要交换的第一个元素的索引
					index++;
					let index2 = index; // 要交换的第二个元素的索引
					// 使用临时变量交换元素
					let temp = this.entityObj.TopCarouselList[index1];
					this.entityObj.TopCarouselList[index1] = this.entityObj.TopCarouselList[index2];
					this.entityObj.TopCarouselList[index2] = temp;
				}
			},
			TopCarouselDel(index) {
				this.entityObj.TopCarouselList.splice(index, 1);
			},
		},
		async mounted() {
			
			try {
			    //this.entityObj.applyOrderItems.map(p=>p.applyOrderItemType=0);
			    var returnValue =
			        await this.$API.auth.PostProcessApi.post(
			            "mini-set/homeCarouselImagesList",{}
			        );
			    if (returnValue.status == 200) {
					returnValue.response.map(item => {
						this.entityObj.TopCarouselList.push({
							CarouselPic: item.carouselPic,
							CarouselUrl: item.carouselUrl,
							CarouselImageId:item.carouselImageId
						})
					})
			       console.log(returnValue.response)
			    }
			} catch (error) {
			    return false;
			}
		}
	}
</script>

<style>
</style>
